<template>
  <div class="top_menu">
    <!-- 组织机构 -->
    <!-- <organization-view /> -->

    <!-- 人员管理 -->
    <!-- <person-management ref="usermanage"/> -->

    <!-- 作业区域道路设定 -->
    <work-area-list ref="areawork"/>

    <!-- 考勤管理 -->
    <attendance-view ref="attendance"/>
    <!-- 查询统计 -->
    <!-- <queryStattistics-view/> -->
    <test-view/>
    <!-- 数据一张图 -->
    <span @click="openYZT" style="cursor: pointer;padding-left:20px;" class="spanhover">数据一张图</span>
    <!-- <div class="dlicon">
      <dl class="displaynone">
        <dd><img src="../../../img/map2.png" alt=""></dd>
        <dt>地图</dt>
      </dl>
      <dl class="displaynone">
        <dd>
          <img src="../../../img/stations2.png" alt="">
        </dd>
        <dt>垃圾管理站</dt>
      </dl>
      <dl @click="userstration" >
        <dd>
         <img src="../../../img/user2.png" alt="">
        </dd>
        <dt>人员管理</dt>
      </dl>
      <dl @click="worktongji">
        <dd>
          <img src="../../../img/tongji2.png" alt="">
        </dd>
        <dt>在线统计</dt>
      </dl>
      <dl class="displaynone">
        <dd>
          <img src="../../../img/trajectory2.png" alt="">
        </dd>
        <dt>作业轨迹</dt>
      </dl>
      <dl class="displaynone">
        <dd>
         <img src="../../../img/video2.png" alt="">
        </dd>
        <dt>视频监控</dt>
      </dl>
      <dl @click="area">
        <dd>
          <img src="../../../img/settings2.png" alt="">
        </dd>
        <dt>区域设置</dt>
      </dl>
      <dl @click="openYZT">
        <dd><img src="../../../img/chart2.png" alt=""></dd>
        <dt>一张图统计</dt>
      </dl>
      <dl class="displaynone">
        <dd>
          <img src="../../../img/viewing2.png" alt="">
        </dd>
        <dt>信息查看</dt>
      </dl>
      <dl @click="alarmalter" class="displaynone">
        <dd>
          <img src="../../../img/alarm2.png" alt="">
        </dd>
        <dt>报警列表</dt>
      </dl>
    </div> -->
    <!-- 实时在线数据 -->
     <div class="statistical" v-if="Visible">
      <div class="title">
        <i class="iconfont icon-tongji1" />
        <h3>实时在线统计</h3>
        <span class="iconfont icon-guanbi close" @click="close" />
      </div>
      <div class="statistical_content">
        <el-table :data="statisticalData" style="width: 100%" stripe border>
          <el-table-column prop="名称" label="区域" align="center"></el-table-column>
          <el-table-column prop="名称" label="区域" align="center"></el-table-column>
          <el-table-column prop="在线人数" label="在线人数(作业)" align="center"></el-table-column>
          <el-table-column prop="全部人数" label="全部人数" align="center"></el-table-column>
        </el-table>
      </div>
      <div
        class="statistical_time"
      >统计时间：{{new Date().toLocaleDateString() + ' - ' + new Date().toTimeString().split(' ')[0]}}</div>
    </div>
    
<!--设置一张图时间 -->
    <div class="set_time_box" v-if="Visible2">
      <h2>
        <span>设置时间段</span>
        <i class="iconfont icon-guanbi" @click="YZT.show = false"></i>
      </h2>
      <div class="content">
        <div>
          <span>开始时间</span>
          <el-date-picker
            v-model="YZT.startTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <div>
          <span>结束时间</span>
          <el-date-picker
            v-model="YZT.endTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <div>
          <el-button type="primary" @click="openYZT">确 定</el-button>
        </div>
      </div>
    </div>

  </div>
  
</template>

<script>
import eventBus from '@/eventBus.js'

// 作业区域道路设定
import WorkAreaList from '@/views/CleanerWork/TopToolbar/WorkAreaList.vue'
// 组织机构
import Organization from '@/views/CleanerWork/TopToolbar/Organization.vue'
// 人员管理
import PersonManagement from '@/views/CleanerWork/TopToolbar/PersonManagement.vue'
// 考勤管理
import Attendance from '@/views/CleanerWork/TopToolbar/Attendance.vue'
//查询统计 
import queryStatistics from '@/views/CleanerWork/TopToolbar/QueryStatistics.vue'

import zylxz from '@/views/CleanerWork/TopToolbar/zylxz.vue'


export default {
  data(){
    return{
       // 是否显示实时在线统计对话框
        Visible: false,
        statisticalData: [],
        MouseEvent: {
          top: 0,
          left: 0,
          isShow: false
        },
        Visible2:false,
        // YZT:{
        //   show:false,
        //   startTime:'',
        //   endTime:''
        // }
    }
  },
  methods: {
    // worktongji(event){
    //   eventBus.$emit('onlineStatistics',event.target)
    // },
    // openYZT () {
    //   let user = ''
    //   let clientNo = `${this.$route.query.ClientNo}`
    //   if (clientNo == '0000001') {
    //     user = 'glx'
    //   }
    //   if (clientNo == '0000004') {
    //     user = 'yx'
    //   }
    //   let date = new Date()
    //   let seperator1 = "-"
    //   let year = date.getFullYear()
    //   let month = date.getMonth() + 1
    //   if (month >= 1 && month <= 9) {
    //     month = "0" + month
    //   }
    //   let DateTime = year + seperator1 + month
    //   window.open('http://111.160.78.62:9936/indexPerson.html?user='+user+'&&date='+DateTime, '_blank')

      
      
    // },
    openYZT(){
      this.$refs.attendance.openYZT()
    },

    //实时在线统计
     async onlineStatistics () {
      this.Visible = true
      const { data } = await this.$Http.get(`/DataListCompany/GetWorkerStatisticsInfoApi?ClientNo=${this.$route.query.ClientNo}`)
      this.statisticalData = data
      eventBus.$emit('isCover', this.Visible)
    },
    // 关闭实时在线统计
    close () {
      this.Visible = false
      eventBus.$emit('isCover', this.Visible)
    },
    //用户管理
      userstration () {
        this.$refs.usermanage.personManage()
      },
      //区域道路设定
      area(){
        this.$refs.areawork.openPersonnelRoad();
      },
      alarmalter(){
        
      },
      worktongji(){
        this.onlineStatistics();
      }
  },
  components: {
    'work-area-list': WorkAreaList,
    'organization-view': Organization,
    'person-management': PersonManagement,
    'attendance-view': Attendance,
    'queryStattistics-view': queryStatistics,
    'test-view': zylxz,
  }
}
</script>

<style scoped lang="less">
// .BMap_mask{
//   border-left: 2px solid #07c4a8!important;
// } 

.top_menu {
  height: 30px;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size:20px;
  font-weight: 600;
  padding:8px;
  position: relative;
  border:2px solid #07c4a8;
  border-right: 0;
  border-left: 0;
  .spanhover:hover{
    color: #07c4a8;
  }
}

.statistical {
  width: 600px;
  min-height: 390px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-left: 5px;
    box-sizing: border-box;
    h3 {
      color: #666;
    }
    span {
      margin-left: 450px;
    }
  }
  .statistical_content {
    min-height: 310px;
    padding: 0 20px;
    background-color: #f3f3f3;
    overflow-y: auto;
  }
  .statistical_time {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #666;
    background-color: #f3f3f3;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
  }
}
.displaynone{
  display: none;
}
.dlicon{
  width: 100%;
  position:absolute;
  z-index:75;
  left: 0;
  top: 28px;
  background-color: #07c4a8;
  opacity: 1;
  display: flex;
  dl{
    width:80px;
    height: 55PX;
    margin:10px;
    margin-right:0;
    border-radius: 5px;
    border:2px solid #2c2c2c;
    box-sizing: border-box;
    background: #fff;
    padding:5px;
    dd{
      width:70%;
      height:60%;
      text-align: center;
      margin: 2% auto;
      img{
        width: 100%;
        height: 100%;

      }
    }
    dt{
      font-size: 12px!important;
      font-weight: 300;
      text-align: center;
      cursor:default;
      color: #2c2c2c;
    }
  }
  dl:hover{
    border:2px solid #ccc;
    box-shadow:0 0 15px 1px #525050;
  }
}
.content {
  height: calc(~'100% - 32px');
}
.set_time_box {
  width: 300px;
  height: 130px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  box-shadow: 0 0 5px 3px #ccc;
  background-color: #fff;
  z-index: 999999;
  h2 {
    border-bottom: 1px solid #ccc;
  }
  .content {
    padding-top: 5px;
    & > div {
      height: 26px;
      line-height: 26px;
      margin-bottom: 5px;
      padding-left: 20px;
      & > span {
        padding-right: 15px;
      }
      & > .el-button {
        float: right;
        padding: 0 5px;
        margin-right: 15px;
      }
    }
    /deep/.el-date-editor.el-input {
      width: 190px;
    }
    /deep/.el-input--prefix .el-input__inner {
      padding: 0;
      padding-left: 20px;
    }
    /deep/.el-input__prefix {
      left: -1px;
    }
  }
}
</style>